<template>
  <Menu mode="horizontal" theme="light">
    <div class="container">
      <div class="layout-nav">
        <Menu-item v-for="(nav, index) in navs" :name="index" :key="index">
          <a :href="nav.url">{{ nav.name }}</a>
        </Menu-item>
        <Submenu name="5">
          <template slot="title">
            论坛
          </template>
          <Menu-group title="门户">
            <Menu-item v-for="item in forum" :name="item.name" :key="item.name">
              <a :href="item.url" target="_blank">{{ item.title }}</a>
            </Menu-item>
          </Menu-group>
        </Submenu>
      </div>
      <div class="layout-ceiling">
        <div class="layout-ceiling-main">
          <a href="http://member.laixue.com/login.html" target="_blank">
            <Icon type="person"></Icon>
            登录
          </a> |
          <a href="http://member.laixue.com/signup.html" target="_blank">注册</a>
        </div>
      </div>
    </div>
  </Menu>
</template>

<script>
export default {
  name: 'top',
  data () {
    return {
      navs: [
        {name: '您好，欢迎来到来学网', url: '/'},
        {name: '网校', url: 'http://wx.laixue.com'},
        {name: '题库', url: 'http://lxbd.laixue.com'},
        {name: '手机App', url: 'http://app.laixue.com'}
      ],
      forum: [
        {name: '5-1', title: '土木者论坛', url: 'http://bbs.tumuzhe.com'},
        {name: '5-2', title: '乐考网', url: 'http://www.luckao.com/'},
        {name: '5-3', title: '医学之家', url: 'http://www.yixue33.com/'},
        {name: '5-4', title: '公考社区', url: 'http://www.chinarsks.com.cn/'}
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ivu-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

a {
  color: #657180;
}

.layout-ceiling-main{
  float: right;
  margin-right: 15px;
}

.layout-ceiling-main a{
  color: #9ba7b5;
}
</style>
